<template>
  <v-app>
    <v-main>
      <v-container class="fill-height align-center justify-center">
        <v-card style="margin: 60px" max-width="400px">
          <v-img
            class="white--text align-end"
            height="200px"
            src="https://cdn.vuetifyjs.com/images/cards/docks.jpg"
          >
            <v-card-title>请登录</v-card-title>
          </v-img>

          <v-card-subtitle class="pb-0">
            {{ new Date().getDay() | getDay }}
          </v-card-subtitle>

          <v-card-text class="text--primary">
            <div>{{ today }}</div>
          </v-card-text>
        </v-card>
        <v-form
          style="margin: 60px"
          ref="form"
          v-model="valid"
          lazy-validation
          class="v_form"
        >
          <v-text-field
            v-model="username"
            :counter="16"
            :rules="nameRules"
            label="用户名"
            required
          ></v-text-field>

          <v-text-field
            v-model="password"
            type="password"
            :rules="passwordRules"
            label="密码"
            :counter="20"
            required
          ></v-text-field>

          <v-checkbox
            v-model="remember"
            label="记住登录状态"
            required
          ></v-checkbox>

          <v-btn
            :disabled="!valid"
            color="success"
            class="mr-4"
            @click="validate"
          >
            登录
          </v-btn>

          <v-btn color="error" class="mr-4" @click="reset"> 重置 </v-btn>
        </v-form>
      </v-container>
    </v-main>
  </v-app>
</template>

<script>
export default {
  name: "Login",
  data() {
    return {
       valid: true,
    username: "admin",
    nameRules: [
      (v) => !!v || "用户名不能为空",
      (v) => (v && v.length <= 16) || "用户名不能超过32个字符",
    ],
    password: "123456",
    passwordRules: [
      (v) => !!v || "密码不能为空",
      (v) => (v && v.length <= 20) || "密码不能超过64个字符",
    ],
    remember: false,
    }
  },
  filters: {
    getDay(r) {
      return ["周一", "周二", "周三", "周四", "周五", "周六", "周日"][r - 1];
    },
  },
  computed: {
    today() {
      const addZero = (val) => (val >= 10 ? val : "0" + val);
      const today = new Date();
      return `${addZero(today.getFullYear())}-${addZero(
        today.getMonth() + 1
      )}-${addZero(today.getDate())}`;
    },
  },
  methods: {
    validate() {
      this.$refs.form.validate();
      this.$router.push("/home");
    },
    reset() {
      this.$refs.form.reset();
    },
  },
};
</script>

<style scoped>
.v_form {
  min-width: 380px;
}
</style>
